import { connect } from 'dva';
import React, { PureComponent } from 'react';
import { TableC } from '../../../comps';
import colors from '../../../css/colors';
import 'moment/locale/zh-cn';

@connect(({ userManageNewM, userM: user, loading }) => ({
  userManageNewM,
  user,
  loading: loading.effects['userManageNewM/Search'] || loading.effects['userManageNewM/SearchTenant'],
}))
export default class TableForm extends PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      scrollx: 0,
    };
  }

  showCreatedBy = (tenantData, val) => {
    if (!tenantData) return '';
    let text = '';
    tenantData.forEach((item) => {
      if (item.value === val) text = item.title;
    });
    return text;
  };

  // 表格页码排序改变调用
  handleTableChange = (pagination) => {
    const { current, pageSize } = pagination;
    this.props.changeReset(current, pageSize);
  };

  // 拼接角色/岗位名称
  changeName = (record, name) => {
    let text = '';
    if (record && record.length) {
      record.map((item, index) => {
        text += item[name];
        if (index < record.length - 1) text += ',';
      });
    } else {
      text = '--';
    }
    return text;
  };

  render() {
    const { data, superMan, isZiGuan, onEditFrom, onDeleteFrom, onUnlockFrom, onUnfreezeFrom, onFreezeFrom, onResetFrom } = this.props;
    const {
      userManageNewM: { tenantData },
    } = this.props;
    let columns = [];
    if (superMan == true) {
      columns = [
        {
          title: '租户名称',
          dataIndex: 'tenantName',
          key: 'tenantName',
          width: 110,
          render: (text, record) => <span>{this.showCreatedBy(tenantData, record.tenant)}</span>,
        },
        {
          title: '用户名称',
          dataIndex: 'name',
          key: 'name',
          width: 110,
        },
        {
          title: '用户账户',
          dataIndex: 'userAccount',
          key: 'userAccount',
          width: 100,
        },
        {
          title: '角色',
          dataIndex: 'roleModels',
          key: 'roleModels',
          width: 100,
          render: (text) => <span>{this.changeName(text, 'roleName')}</span>,
        },
        {
          title: '岗位',
          dataIndex: 'stationModels',
          key: 'stationModels',
          width: 100,
          render: (text) => <span>{this.changeName(text, 'postName')}</span>,
        },
        {
          title: '查询权限',
          dataIndex: 'autoQueryPortfolio',
          key: 'autoQueryPortfolio',
          width: 90,
          render: (text) => <span>{text == '0' ? '是' : '否'}</span>,
        },
        {
          title: '操作权限',
          dataIndex: 'autoEditPortfolio',
          key: 'autoEditPortfolio',
          width: 90,
          render: (text) => <span>{text == '0' ? '是' : '否'}</span>,
        },
        {
          title: '账户是否锁定',
          dataIndex: 'userLock',
          key: 'userLock',
          width: 140,
          onCell: (record) => {
            const cellProps = {};
            if (record.userLock == 'Y') {
              cellProps.style = {
                background: colors.top5Colors[1],
              };
            }
            return cellProps;
          },
          render: (text) => <span>{text == 'Y' ? '是' : '否'}</span>,
        },
        {
          title: '账户是否冻结',
          dataIndex: 'userActive',
          key: 'userActive',
          width: 140,
          render: (text) => <span>{text == 'Y' ? '否' : '是'}</span>,
        },
        {
          title: '最近一次修改账户',
          key: 'lastUpdBy',
          dataIndex: 'lastUpdBy',
          width: 140,
          render: (text) => text || '--',
        },
        {
          title: '最近一次修改时间',
          dataIndex: 'lastUpdTs',
          key: 'lastUpdTs',
          width: 140,
          render: (text) => text,
        },
        {
          title: '操作',
          dataIndex: 'operate',
          key: 'operate',
          type: 'operate',
          width: 260,
          operates:
            isZiGuan == false
              ? [
                  {
                    title: '解锁账户',
                    onClick: (record) => {
                      onUnlockFrom(record);
                    },
                    rules: {
                      hide: { items: [{ key: 'userLock', value: ['Y'], relation: ['!='] }] },
                    },
                  },
                  {
                    title: '解冻账户',
                    onClick: (record) => {
                      onUnfreezeFrom(record);
                    },
                    rules: {
                      hide: { items: [{ key: 'userActive', value: ['N'], relation: ['!='] }] },
                    },
                  },
                  {
                    title: '冻结账户',
                    onClick: (record) => {
                      onFreezeFrom(record);
                    },
                    rules: {
                      hide: {
                        relation: 'and',
                        items: [
                          { key: 'userActive', value: [null], relation: ['!='] },
                          { key: 'userActive', value: ['Y'], relation: ['!='] },
                        ],
                      },
                    },
                  },
                  {
                    title: '重置密码',
                    onClick: (record) => {
                      onResetFrom(record);
                    },
                  },
                  {
                    title: '编辑',
                    onClick: (record) => {
                      onEditFrom(record);
                    },
                  },
                  {
                    title: '删除',
                    onClick: (record) => {
                      onDeleteFrom(record);
                    },
                  },
                ]
              : [
                  {
                    title: '解冻账户',
                    onClick: (record) => {
                      onUnfreezeFrom(record);
                    },
                    rules: {
                      hide: { items: [{ key: 'userActive', value: ['N'], relation: ['!='] }] },
                    },
                  },
                  {
                    title: '冻结账户',
                    onClick: (record) => {
                      onFreezeFrom(record);
                    },
                    rules: {
                      hide: {
                        relation: 'and',
                        items: [
                          { key: 'userActive', value: [null], relation: ['!='] },
                          { key: 'userActive', value: ['Y'], relation: ['!='] },
                        ],
                      },
                    },
                  },
                  {
                    title: '编辑',
                    onClick: (record) => {
                      onEditFrom(record);
                    },
                  },
                  {
                    title: '删除',
                    onClick: (record) => {
                      onDeleteFrom(record);
                    },
                  },
                ],
        },
      ];
    } else {
      columns = [
        {
          title: '用户名称',
          dataIndex: 'name',
          key: 'name',
          width: 110,
        },
        {
          title: '用户账户',
          dataIndex: 'userAccount',
          key: 'userAccount',
          width: 100,
        },
        {
          title: '角色',
          dataIndex: 'roleModels',
          key: 'roleModels',
          width: 100,
          render: (text) => <span>{this.changeName(text, 'roleName')}</span>,
        },
        {
          title: '岗位',
          dataIndex: 'stationModels',
          key: 'stationModels',
          width: 100,
          render: (text) => <span>{this.changeName(text, 'postName')}</span>,
        },
        {
          title: '查询权限',
          dataIndex: 'autoQueryPortfolio',
          key: 'autoQueryPortfolio',
          width: 90,
          render: (text) => <span>{text == '0' ? '是' : '否'}</span>,
        },
        {
          title: '操作权限',
          dataIndex: 'autoEditPortfolio',
          key: 'autoEditPortfolio',
          width: 90,
          render: (text) => <span>{text == '0' ? '是' : '否'}</span>,
        },
        {
          title: '账户是否锁定',
          dataIndex: 'userLock',
          key: 'userLock',
          width: 140,
          onCell: (record) => {
            const cellProps = {};
            if (record.userLock == 'Y') {
              cellProps.style = {
                background: colors.top5Colors[1],
              };
            }
            return cellProps;
          },
          render: (text) => <span>{text == 'Y' ? '是' : '否'}</span>,
        },
        {
          title: '账户是否冻结',
          dataIndex: 'userActive',
          key: 'userActive',
          width: 140,
          render: (text) => <span>{text == 'Y' ? '否' : '是'}</span>,
        },
        {
          title: '最近一次修改账户',
          key: 'lastUpdBy',
          dataIndex: 'lastUpdBy',
          width: 140,
          render: (text) => text || '--',
        },
        {
          title: '最近一次修改时间',
          dataIndex: 'lastUpdTs',
          key: 'lastUpdTs',
          width: 140,
          render: (text) => text,
        },
        {
          title: '操作',
          dataIndex: 'operate',
          key: 'operate',
          type: 'operate',
          width: 180,
          operates:
            isZiGuan == false
              ? [
                  {
                    title: '解锁账户',
                    onClick: (record) => {
                      onUnlockFrom(record);
                    },
                    rules: {
                      hide: { items: [{ key: 'userLock', value: ['Y'], relation: ['!='] }] },
                    },
                  },
                  {
                    title: '解冻账户',
                    onClick: (record) => {
                      onUnfreezeFrom(record);
                    },
                    rules: {
                      hide: { items: [{ key: 'userActive', value: ['N'], relation: ['!='] }] },
                    },
                  },
                  {
                    title: '冻结账户',
                    onClick: (record) => {
                      onFreezeFrom(record);
                    },
                    rules: {
                      hide: {
                        relation: 'and',
                        items: [
                          { key: 'userActive', value: [null], relation: ['!='] },
                          { key: 'userActive', value: ['Y'], relation: ['!='] },
                        ],
                      },
                    },
                  },
                  {
                    title: '重置密码',
                    onClick: (record) => {
                      onResetFrom(record);
                    },
                  },
                  {
                    title: '编辑',
                    onClick: (record) => {
                      onEditFrom(record);
                    },
                  },
                  {
                    title: '删除',
                    onClick: (record) => {
                      onDeleteFrom(record);
                    },
                  },
                ]
              : [
                  {
                    title: '解冻账户',
                    onClick: (record) => {
                      onUnfreezeFrom(record);
                    },
                    rules: {
                      hide: { items: [{ key: 'userActive', value: ['N'], relation: ['!='] }] },
                    },
                  },
                  {
                    title: '冻结账户',
                    onClick: (record) => {
                      onFreezeFrom(record);
                    },
                    rules: {
                      hide: {
                        relation: 'and',
                        items: [
                          { key: 'userActive', value: [null], relation: ['!='] },
                          { key: 'userActive', value: ['Y'], relation: ['!='] },
                        ],
                      },
                    },
                  },
                  {
                    title: '编辑',
                    onClick: (record) => {
                      onEditFrom(record);
                    },
                  },
                  {
                    title: '删除',
                    onClick: (record) => {
                      onDeleteFrom(record);
                    },
                  },
                ],
        },
      ];
    }

    if (columns && columns.length > 10) {
      const a = columns.length;
      this.setState({
        scrollx: a * 150,
      });
    } else {
      this.setState({
        scrollx: 0,
      });
    }
    return (
      <TableC
        columns={columns}
        pagination
        current={this.props.currentPage}
        pageSize={this.props.numInPage}
        selfScrollY
        dataSource={data}
        scroll={{ x: 'max-content' }}
        rowKey='id'
        loading={this.props.loading}
        onChange={this.handleTableChange}
      />
    );
  }
}
